.payOrderContainer {
    min-height: 100vh;
    width: 100%;
}

.bottomArea {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    box-shadow: 0 -.04rem .2rem rgba(0, 0, 0, 0.08);
}

.bottomButton {
    font-weight: 600;
    background: #222222;
    color: #fff;
    width: 6.9rem;
    margin:.4rem auto;
    height: .8rem;
    border-radius: .4rem;
    line-height: .8rem;
    text-align: center;
    font-size: .32rem;
}

.total {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    background: #fff;
    text-align: right;
}

.total::after {
    position: absolute;
    content: "";
    top: 0;
    left: .3rem;
    right: .3rem;
    height: .02rem;
    background: #e5e5e5;
    opacity: .5;
}

.totalItem {
    padding: .3rem;
    font-size: .32rem;
    display: flex;
    align-items: baseline;
    font-weight: 600;
}

.cardItem {
    position: relative;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: .3rem;
}

.discount {
    color: #FF6E2A;
    font-weight: 600;
}

.cardLeft {
    padding: 0.3rem;
    text-align: left;
    line-height: .4rem;
}

.billInfo {
    font-weight: 600;
}

.desc {
    font-size: .26rem;
    color: #7D7D7D;
    margin-top: .08rem;
}

.amount {
    font-weight: 600;
    font-size: .32rem;
}
.cardRight {
    padding: .3rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.totalAmount{
    font-size .64rem;
}

.discountDesc {
    color: #fff;
    background: #FF6E2A;
    font-size: .22rem;
    padding: .04rem .16rem;
    border-radius: .18rem;
    margin-left: .12rem;
}

.discount::before {
    position: absolute;
    content: "";
    top: 0;
    left: .3rem;
    right: .3rem;
    height: .02rem;
    background: #f6f6f6;
}

.noCardTxt {
    color: #999999;
    font-size: .28rem;
}

.arrow {
    width: .12rem;
    height: .24rem;
    margin-left: .16rem;
}

// .noBefore::before {
//     display: none;
// }

.callOut {
    position: absolute;
    top: 0.12rem;
    right: 0.3rem;
    font-size: 0.24rem;
    color: #fff;
    background: #ff6e2a;
    font-weight: 500;
    border-radius: 0.2rem;
    padding: 0.06rem 0.16rem;
}

.arrow_down {
    width: 0;
    height: 0;
    border-left: .08rem solid transparent;
    border-right: .08rem solid transparent;
    border-top: .08rem solid #FF6E2A;
    position: absolute;
    bottom: -.08rem;
    right: .26rem;
}

.swiperLeft {
    padding-left: .3rem;
    padding-right: .8rem;
    flex: 1;
    text-align left
}

.swiperRight {
    display: flex;
    position: relative;
    color: #222;
    font-size: 0.32rem;
    padding-right: 0.4rem;
    margin-top: 0.16rem;
    padding-left: 0.4rem;
    align-items: center;
}

.coupon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.swiperTitle {
    font-weight: 600;
    color: #ff6e2a;
    font-size: 0.28rem;
}

.price {
    margin-right: .16rem;
    font-weight: 500;
}

.swiperDesc {
    color: #7D7D7D;
    font-size: .24rem;
    margin-top: .08rem;
    line-height: .36rem;
}

.swiper {
    height: 1.68rem;
    border: .02rem solid #FFD9C6;
    background: #FFF4EE;
    border-radius: .08rem;
}

.swiper-item{
    position:relative;
    width:100%;
    height:100%;
    display: flex;
    align-items: center;
}

.swiperArea{
    padding .3rem
}

.checkIcon{
    width:.4rem
}

/* 内容 */

.contaniner-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background:#fff;
    font-size .32rem;
    color:#222222;
}

.payTitle {
    padding: .3rem;
    font-size: .3rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.closeIcon {
    width: .27rem;
    height: .27rem;
}

.payItem {
    display: flex;
    align-items: center;
    font-size: .28rem;
    padding: .3rem;
    justify-content: space-between;
}

.wxIcon {
    width: .48rem;
    height:.42rem;
    margin-right: .2rem;
}

.payRight {
    display: flex;
    align-items: center;
    color: #7D7D7D;
}

.payLeft {
    display: flex;
    align-items: center;
}

.warnTips {
    margin-top: .16rem;
    color: #FF6E2A;
    font-size: .22rem;
}

.walletIcon {
    width: .48rem;
    height: .48rem;
    margin-right: .2rem;
}

.arrow_left {
    width: 0;
    height: 0;
    border-right: .08rem solid rgba(255, 110, 42, .2);
    border-bottom: .08rem solid transparent;
    border-top: .08rem solid transparent;
    position: absolute;
    top: 50%;
    left: -.08rem;
    margin-top: -.08rem;
}

.more {
    display: flex;
    align-items: center;
    font-size: .28rem;
    padding: .3rem;
}

.circle {
    border: .02rem solid #CCCCCC;
    width: .36rem;
    height: .36rem;
    border-radius: 50%;
}

.disabledCircle {
    background: #E5E5E5
}

.dot {
    height: .1rem;
    width: .48rem;
    margin-right: .16rem;
}

.recommond {
    background: rgba(255, 110, 42, .2);
    color: #FF6E2A;
    font-size: .22rem;
    padding: .04rem .18rem;
    margin-left: .2rem;
    font-weight: 600;
    position: relative;
}

.waitBox {
    margin-top: .6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.waitTitle {
    font-weight: 600;
}

/* 头像旋转效果  */

@keyframes headRotate {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loadingImg {
    width: 1.08rem;
    height: 1.08rem;
    margin-bottom: .4rem;
    animation: headRotate 3s linear infinite;
}

.bottomRow {
    margin-top: .6rem;
    display: flex;
    margin-bottom: .88rem;
    align-items: center;
    justify-content: center;
}

.resetPay {
    width: 3.3rem;
    height: .8rem;
    line-height: .8rem;
    border-radius: .4rem;
    text-align: center;
    background: #F0F0F0;
    color: #222222;
}

.refresh {
    width: 3.3rem;
    height: .8rem;
    line-height: .8rem;
    border-radius: .4rem;
    text-align: center;
    background: #222222;
    color: #FFF;
}

.failTips {
    font-size: .26rem;
    color: #999999;
    margin-top: .2rem;
    padding: 0 .4rem;
}
